import { Image, View } from '@tarojs/components'
import { useEffect } from 'react'
import CustomHeader from 'src/components/CustomHeader/CustomHeader'
import styles from './myImage.module.less'
import myImageStore from './MyImageStore'

const MyImage = () => {
  const { list: imageList, loading } = myImageStore;

  useEffect(() => {
    myImageStore.getList();
  }, []);

  return (
    <View className={styles.myImage}>
      <CustomHeader title='我的图库' showBack />
      
      {loading ? (
        <View className={styles.emptyState}>加载中...</View>
      ) : imageList.length > 0 ? (
        <View className={styles.imageGrid}>
          {imageList.map(item => (
            <View key={item.id} className={styles.imageItem}>
              <View className={styles.imageWrapper}>
                <Image 
                  className={styles.image}
                  src={item.imageUrl}
                  mode='aspectFill'
                />
              </View>
              <View className={styles.imageName}>{item.name}</View>
              <View className={styles.imageDate}>{item.date}</View>
            </View>
          ))}
        </View>
      ) : (
        <View className={styles.emptyState}>
          <View className={styles.emptyIcon}>🖼️</View>
          <View className={styles.emptyText}>暂无图片</View>
        </View>
      )}
    </View>
  )
}

export default MyImage